<template>
  <view class="ver-layout">
    <view class="search-layout ver-layout">
      <!--  标题栏  -->
      <view class="back-layout hor-layout-side-center">
        <view class="back-view" @click="leftBtnClick">
          <i v-if="!multiSelect" class="iconfont back-icon">&#xe8de;</i>
          <view v-else class="text-btn">全选</view>
        </view>
        <view class="back-title-view">{{ multiSelect ? '选择项目' : '备忘录' }}</view>
        <view class="back-view hor-layout-center" @click="multiSelect=!multiSelect">
          <image v-if="!multiSelect" class="title-select-all" :src="ic_todo_select_all"></image>
          <view v-else class="text-btn">取消</view>
        </view>
      </view>
      <!--  搜索栏    -->
      <view class="search-view">
        <u-search v-model="search" placeholder="搜索备忘录" :show-action="false"></u-search>
      </view>
    </view>
    <!--  列表  -->
    <view class="todo-list-view" v-if="filterTodoList.length>0">
      <view class="todo-item hor-layout-center" v-for="(item,index) in filterTodoList" :key="index">
        <view v-if="multiSelect" class="todo-check-view ver-layout-center-all" :class="{'select':item.select}"
              @click="selectTodoItem(item)">
          <i v-if="item.select" class="iconfont check-icon">&#xe72e;</i>
        </view>
        <view class="todo-item-content" :class="{'short':multiSelect}" @click="toTodoInfo(item)">
          <view class="todo-title single-line">{{ item.title }}</view>
          <view class="todo-info hor-layout">
            <view class="todo-time">{{ item.remind_time }}</view>
            <view class="todo-content single-line">{{ item.description }}</view>
          </view>
        </view>
      </view>
    </view>
    <view v-else class="todo-list-view list-no-data">暂无数据</view>
    <!--  底部tab栏  -->
    <view class="bottom-layout hor-layout">
      <block v-if="!multiSelect">
        <view class="bottom-view ver-layout-center-all" :class="{'select':selTab===item.value}"
              v-for="(item,index) in tabList" :key="index"
              @click="tabClick(item)">
          <image class="todo_tab_icon" :src="selTab===item.value?item.sel_icon:item.icon"></image>
          <view>{{ item.title }}</view>
        </view>
      </block>
      <view v-else class="delete-text" @click="deleteClick">
        <image class="delete-icon" :src="ic_todo_delete"></image>
        <view style="color: #AFABAA">删除</view>
      </view>
    </view>
    <!-- 添加按钮   -->
    <view v-if="!multiSelect" class="add-student-btn" @click="toAddTodo">
      <i class="iconfont add-student-icon">&#xe601;</i>
    </view>
    <!--  删除提示  -->
    <u-modal v-model="confirmObj.show" :content="confirmObj.content" :show-title="false" show-cancel-button
             @confirm="confirmDelete" @cancel="multiSelect=false"></u-modal>
  </view>
</template>

<script>
import {todoInfo} from "@/router.js"
import {TodoApi} from "@/api/askBreak.js"

let ic_todo_list_sel = require("@/static/home/ic_todo_list_sel.png"),
    ic_todo_list = require("@/static/home/ic_todo_list.png"),
    ic_todo_done_sel = require("@/static/home/ic_todo_done_sel.png"),
    ic_todo_done = require("@/static/home/ic_todo_done.png"),
    ic_todo_select_all = require("@/static/home/ic_todo_select_all.png"),
    ic_todo_delete = require("@/static/home/ic_todo_delete.png"),
    engine = new TodoApi()
export default {
  name: "todoList",
  data() {
    return {
      ic_todo_select_all,
      ic_todo_delete,
      multiSelect: false,
      search: '',
      selTab: 0,
      tabList: [
        {title: '待办', value: 0, icon: ic_todo_list, sel_icon: ic_todo_list_sel},
        {title: '笔记', value: 1, icon: ic_todo_done, sel_icon: ic_todo_done_sel}
      ],
      todoList: [{title:'ces',remind_time:'2021-12-21',}],
      options: [{text: '删除', style: {backgroundColor: '#dd524d'}}],
      confirmObj: {
        id: '',
        show: false,
        content: '确认删除此条备忘录吗？'
      },
    }
  },
  computed: {
    filterTodoList() {
      if (this.search) return this.todoList.filter(item => item.title.indexOf(this.search) >= 0)
      else return this.todoList
    }
  },
  onLoad(options) {
    this.getTodoList()
  },
  methods: {
    toTodoInfo(todo) {
      this.$u.route({url: todoInfo, params: {...todo, flag: 'detail'}})
    },
    selectTodoItem(item) {
      let todoIndex = this.todoList.findIndex(todo => todo.id === item.id),
          select = this.todoList[todoIndex].select
      this.todoList[todoIndex].select = !select
      this.$forceUpdate()
    },
    leftBtnClick() {
      if (!this.multiSelect) this.$u.route({type: 'back'})
      else {
        let select = this.todoList.every(todo => todo.select)
        this.todoList.forEach(todo => todo.select = !select)
        this.$forceUpdate()
      }
    },
    getTodoList() {
      engine.getTodoList(this.selTab).then(res => {
        this.todoList = res.data
      })
    },
    tabClick(item) {
      this.selTab = item.value
      this.getTodoList()
    },
    toAddTodo() {
      this.$u.route({url: todoInfo})
    },
    deleteClick() {
      let haveSelect = this.todoList.some(todo => todo.select)
      if (haveSelect) this.confirmObj.show = true
      else this.$u.toast("请选择删除项！")
    },
    confirmDelete() {
      let selIds = this.todoList.filter(todo => todo.select).map(todo => todo.id)
      engine.deleteTodo(selIds).then(res => {
        this.$u.toast(res.message)
        if (res.code === 200) {
          this.multiSelect = false
          setTimeout(() => this.getTodoList(), 700)
        }
      })
    }
  }
}
</script>

<style>
page {
  background: #F2F2F2;
}

.search-layout {
  z-index: 100;
  position: fixed;
  width: 100%;
  background: #42B4AB;
}

.back-layout {
  width: 100%;
  padding-top: var(--status-bar-height);
  height: calc(var(--status-bar-height) + 44px);
  line-height: 44px;
  font-size: 16px;
  background: #42B4AC;
}

.back-view {
  padding: 0px 9px;
  height: 44px;
}

.back-view > .text-btn {
  line-height: 44px;
  font-size: 16px;
  color: #FFFFFF;
}

.back-icon {
  color: white;
  font-size: 22px;
}

.back-title-view {
  font-weight: 700;
  font-size: 16px;
  line-height: 30px;
  color: white;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.title-select-all {
  width: 18px;
  height: 18px;
}

.search-view {
  padding: 12px;
  height: 56px;
}

.bottom-layout {
  position: fixed;
  bottom: 0px;
  width: 100%;
  height: 50px;
  background: #FFFFFF;
}

.bottom-view {
  flex: 1;
  height: 50px;
  color: #AFABAA;
  text-align: center;
}

.bottom-view.select {
  color: #42B4AB;
}

.todo_tab_icon {
  width: 20px;
  height: 20px;
}

.delete-text {
  margin: auto;
  width: 50%;
  font-size: 10px;
  color: #AFABAA;
  text-align: center;
}

.todo-list-view {
  margin-top: calc(44px + 56px + var(--status-bar-height));
  margin-bottom: 60px;
}

.todo-item {
  width: 100%;
  margin-top: 18px;
}

.todo-check-view {
  flex-shrink: 0;
  margin-left: 11px;
  width: 19px;
  height: 19px;
  line-height: 19px;
  border-radius: 2px;
  border: 2px solid #CBCBCB;
}

.todo-check-view.select {
  border: 2px solid #42B4AB;
}

.check-icon {
  color: #42B4AB;
  font-weight: bold;
  font-size: 15px;
}

.todo-item-content {
  flex: 1;
  width: calc(100% - 30px);
  margin-left: 18px;
  margin-right: 12px;
  background: white;
  border-radius: 6px;
  padding: 15px 12px;
}

.todo-item-content.short {
  width: calc(100% - 30px - 30px);
}

.todo-title {
  width: 100%;
  font-size: 15px;
  font-weight: bold;
  color: #333333;
}

.todo-info {
  width: 100%;
  margin-top: 14px;
}

.todo-time {
  font-size: 14px;
  color: #999999;
}

.todo-content {
  flex: 1;
  margin-left: 12px;
  font-size: 14px;
  color: #666666;
}

.add-student-btn {
  position: fixed;
  bottom: 73px;
  right: 13px;
  width: 52px;
  height: 52px;
  line-height: 52px;
  text-align: center;
  background: #42B4AB;
  border-radius: 50%;
}

.add-student-icon {
  color: white;
  font-size: 30px;
}

.delete-icon {
  width: 21px;
  height: 21px;
}
</style>
